<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>修改资料</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="css/login.css" rel="stylesheet" type="text/css"/>
        <link href="css/aui/aui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="js/aui/aui-dialog.js" ></script>
        <style type="text/css">
            .wrap{
                background-color: white;
                height: 2.5rem;
                color: #7f7f7f;
                border-bottom: 1px solid #f5f5f5;
            }
            .wrap .wrap-font{
               float: left;
               margin-left: 15px;
               line-height: 2.5rem;
            }
            .wrap .wrap-scanf{
                float: right;
                margin-right: 4%;
                margin-top: 5px;
                /*border: 1px solid black;*/
            }
            .wrap .wrap-scanf input{
                margin-top: -3px;
                text-align: right;
            }
            .regular-radio{
                display: none;
            }
            .regular-radio + label {
                -webkit-appearance: none;
                background-color: #fafafa;
                /*border: 1px solid #cacece;*/
                box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
                padding: 9px;
                border-radius: 50px;
                display: inline-block;
                position: relative;
                top: 5px;
            }
             
            .regular-radio:checked + label:after {
                content: ' ';
                width: 12px;
                height: 12px;
                border-radius: 50px;
                position: absolute;
                top: 3px;
                background: rgb(41, 193, 41);
                /*box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);*/
                /*background: #03a9f4;*/
                text-shadow: 0px;
                left: 3px;
                font-size: 32px;
            }
             
            .regular-radio:checked + label {
                background-color: #e9ecee;
                color: #99a1a7;
                /*border: 1px solid #adb8c0;*/
                box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
            }
             
            .regular-radio:checked + label:active {
                box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
            }
        </style>

    </head>
    <body>
        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed b-line">
                <a href="person" class="aui-navBar-item">
                    <i class="icon icon-return"></i>
                </a>
                <div class="aui-center">
                    <span class="aui-center-title" style="font-size: 16px;">修改资料</span>
                </div>
            </header>#include('header.html')
            <section class="aui-scrollView">
                <div class="aui-code-box" >
                    <form action="" method="post" onsubmit="return checkform()">
                        <a href="headicon">
                        <div class="wrap">
                            <span class="wrap-font">更换头像</span>
                            <div style="float: right;margin-right: 6px;margin-top: 5px;">
                                <img src="images/headicon/${user.uPic}" alt="" style="margin-top: 5px;display: inline-block;border-radius: 50%;width: 30px;">
                                <i class="icon icon-return" style="transform: rotate(180deg);float: right;width: 13px;margin-top: 10px;margin-left: 8px;"></i>
                            </div>
                        </div>
                        </a>
                        <div class="wrap">
                            <span class="wrap-font">用户名</span>
                            <div class="wrap-scanf">
                                <input type="text" name="uName" value="${user.uName}" id="username" autocomplete="off">
                            </div>                            
                        </div>
                        <div class="wrap">
                            <span class="wrap-font">手机号</span>
                            <div class="wrap-scanf">
                                <input type="text" name="uTel" value="${user.uTel}" id="telpho" autocomplete="off">
                            </div>                            
                        </div>
                        <div class="wrap">
                            <span class="wrap-font">性别</span>
                            <div class="wrap-scanf" style="margin-top: 10px;">
                                <input type="radio" id="radio-1-1" name="uSex" value="1" ${user.uSex!=2?'checked':''} class="regular-radio"  /><label for="radio-1-1" style="margin-right: 10px;"></label>男&nbsp;&nbsp;&nbsp;
                                <input type="radio" id="radio-1-2" name="uSex" value="2" ${user.uSex==2?'checked':''} class="regular-radio" /><label for="radio-1-2" style="margin-right: 10px;"></label>女
                            </div>
                            
                        </div>
                        <a href="modify_email">
                        <div class="wrap">
                            <span class="wrap-font">更换邮箱</span>
                            <div style="float: right;margin-right: 6px;margin-top: 5px;">
                                <i class="icon icon-return" style="transform: rotate(180deg);float: right;width: 13px;margin-top: 10px;margin-left: 8px;"></i>
                            </div>
                        </div>
                        </a>
                        <a href="modify_password">
                        <div class="wrap">
                            <span class="wrap-font">修改密码</span>
                            <div style="float: right;margin-right: 6px;margin-top: 5px;">
                                <i class="icon icon-return" style="transform: rotate(180deg);float: right;width: 13px;margin-top: 10px;margin-left: 8px;"></i>
                            </div>
                        </div>
                        </a>
                        <div class="wrap" style="height: 130px;">
                            <span class="wrap-font" >个人简介</span>
                            <div>
                                <textarea rows="10" cols="15" name="uIntroduction" maxlength="100" style="margin: 0 15px;width:95%;height: 70px;">${user.uIntroduction}</textarea>
                            </div>                            
                        </div>                       
                        <div class="aui-code-btn">
                            <button style="font-size: 14px;">修改</button>
                        </div>
                    </form>
                </div>
            </section>
        </section>
         <script type="text/javascript">
        var dialog = new auiDialog({})
            function checkform(){
                var uname=document.getElementById("username").value;
                var tel=document.getElementById("telpho").value;
                var telreg=/^1(3|4|5|7|8)\d{9}$/;
                if(uname.length<2||uname.length>8||uname==""){
                    dialog.alert({
                            // title:"用户名",
                            msg:'用户名长度应为2~8字符！',
                            buttons:['确定']
                        },function(ret){
                            console.log(ret)
                        });
                    return false;
                }
                
                
                else {
                    if(telreg.test(tel)==false){
                    dialog.alert({
                            // title:"用户名",
                            msg:'请输入有效的手机号！',
                            buttons:['确定']
                        },function(ret){
                            console.log(ret)
                        });
                    return false;
                }
                else {
                    $.ajax({
                            url:"domodify",
                            dataType:"json",
                            type:"post",
                            data:$("form").serialize(),
                            success:function(result){
                                if(result.status=="1"){
                                    dialog.alert({
                                        msg:'修改成功。',
                                        buttons:['确定']
                                    },function(ret){
                                        window.location.reload();
                                    });
                                }
                                else {
                                    dialog.alert({
                                        msg:''+result.tips,
                                        buttons:['确定']
                                    });
                                }
                            },
                            error:function(result){
                                console.log(result);
                                dialog.alert({
                                    msg:'系统繁忙！',
                                    buttons:['确定']
                                });
                            }
                        });
                    return false;
                }
                          
                return true;
                }
            }
        </script> 

    </body>
</html>
